<template>
  <div class="default-btn" :style="customStyle">
    <div v-if="btnPos === 'left' || btnPos === 'right'">
      <a-icon type="caret-left" v-if="BtnVisible === 'unfold'" />
      <a-icon type="caret-right" v-if="BtnVisible === 'fold'" />
    </div>
    <div v-if="btnPos === 'bottom' || btnPos === 'top'">
      <a-icon type="caret-up" v-if="BtnVisible === 'unfold'" />
      <a-icon type="caret-down" v-if="BtnVisible === 'fold'" />
    </div>
  </div>
</template>
<script>
export default {
  name: "DrawerBtn",
  props: {
    btnPos: {
      type: String,
      default: "left",
      validator(val) {
        return ["left", "right", "top", "bottom"].indexOf(val) !== -1;
      }
    },
    state: {
      type: String,
      default: "fold",
      validator(val) {
        return ["fold", "unfold"].indexOf(val) !== -1;
      }
    },
    customStyle: {
      type: Object,
      default: () => {
        return {
          width: "100%",
          background: "white",
          "font-size": "15px"
        };
      }
    }
  },
  computed: {
    BtnVisible() {
      const { btnPos, state } = this;
      switch (btnPos) {
        case "left":
          return state;
        case "right":
          return state === "fold" ? "unfold" : "fold";
        case "top":
          return state;
        case "bottom":
          return state === "fold" ? "unfold" : "fold";
        default:
          return false;
      }
    },
    rightOrBottom() {
      const { state, btnPos } = this;
      return (
        (state === "fold" && btnPos === "left") ||
        (state === "unfold" && btnPos === "right")
      );
    }
  }
};
</script>
<style lang="less" scoped>
.default-btn {
  width: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
